<!doctype html>
<style>
    div {
        width: 10px;
        height: 100px;
        display: inline-block;
        border-width: 85px;
    }
    .dashed {
        border-style: dashed;
        border-top-color: rgba(0, 255, 0, 0.75);
        border-right-color: rgba(0, 0, 255, 0.75);
        border-bottom-color: rgba(0, 255, 0, 0.75);
        border-left-color: rgba(0, 0, 255, 0.75);
    }
    .dotted {
        border-style: dotted;
        border-top-color: rgba(0, 255, 0, 0.5);
        border-right-color: rgba(0, 0, 255, 0.75);
        border-bottom-color: rgba(0, 255, 0, 0.75);
        border-left-color: rgba(0, 0, 255, 0.5);
    }
    .solid {
        border-style: solid;
        border-top-color: rgba(0, 255, 0, 0.5);
        border-right-color: rgba(0, 0, 255, 0.75);
        border-bottom-color: rgba(0, 255, 0, 0.5);
        border-left-color: rgba(0, 0, 255, 0.5);
    }
    .double {
        border-style: double;
        border-top-color: rgba(0, 255, 0, 0.5);
        border-right-color: rgba(0, 0, 255, 0.75);
        border-bottom-color: rgba(0, 255, 0, 0.25);
        border-left-color: rgba(0, 0, 255, 0.5);

    }
    .groove {
        border-style: groove;
        border-top-color: rgba(0, 255, 0, 0.5);
        border-right-color: rgba(0, 0, 255, 0.75);
        border-bottom-color: rgba(0, 255, 0, 0.25);
        border-left-color: rgba(0, 0, 255, 0.25);

    }
    .ridge {
        border-style: ridge;
        border-top-color: rgba(0, 255, 0, 0.5);
        border-right-color: rgba(0, 0, 255, 0.75);
        border-bottom-color: rgba(0, 255, 0, 0.15);
        border-left-color: rgba(0, 0, 255, 0.25);

    }
    .inset {
        border-style: inset;
        border-top-color: rgba(0, 255, 0, 0.5);
        border-right-color: rgba(0, 0, 255, 0.75);
        border-bottom-color: rgba(0, 255, 0, 0.25);
        border-left-color: rgba(0, 0, 255, 0.15);

    }
    .outset {
        border-style: outset;
        border-top-color: rgba(0, 255, 0, 0.15);
        border-right-color: rgba(0, 0, 255, 0.75);
        border-bottom-color: rgba(0, 255, 0, 0.25);
        border-left-color: rgba(0, 0, 255, 0.15);

    }
</style>
<div class="dashed"></div>
<div class="dotted"></div>
<div class="solid"></div>
<div class="double"></div>
<br>
<div class="groove"></div>
<div class="ridge"></div>
<div class="inset"></div>
<div class="outset"></div>
